<template>
	<view>
		<view class="system-height" :style="{height:statusBarHeight}"></view>
		<view class="container">
			<view class="content">
				<view class="asset-cards">
					<view class="amount-boxs">
						<text class="amount">Tx通证</text>
						<text class="amount1">{{ userInfo.token}}</text>
					</view>
					<view class="amount-boxs">
						<text class="amount">可用乐豆</text>
						<text class="amount1">{{ userInfo.beans}}</text>
					</view>
				</view>

				<view class="asset-cards">
					<view class="amount-boxs">
						<text class="amount">乐豆</text>
						<text class="amount1">{{ userInfo.beans}}</text>
					</view>
					<view class="amount-boxs">
						<text class="amount">当前价</text>
						<text class="amount1">{{ userInfo.tokenRate}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="body-tab">
			<view class="tabs">
				<view class="tab-item" :class="{ active: activeTab === 0 }">
					Tx通证
				</view>
				<!-- <view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
					乐豆
				</view> -->
			</view>
			<view class="form">
				<view class="form-item">
					<view class="input-title">
						<!-- <view class="icon-replace"></view> -->
						<text>交易类型</text>
					</view>
					<input class="input" :placeholder="type ==='1' ?'出售':'购买'" disabled="true" />
				</view>

				<view class="form-item">
					<view class="input-title">
						<!-- <view class="icon-replace"></view> -->
						<text v-if="type ==='1'">出售数量</text>
						<text v-else>购入数量</text>
					</view>
					<input class="input" placeholder="输入转出数量" type="number" v-model="tokenAmount" />
				</view>

				<view class="form-item">
					<view class="input-title">
						<text>预计可得金额</text>
					</view>
					<view style="font-size: 19px;">{{getnum()}}</view>
				</view>
			</view>
			<button class="submit-btn" v-if="type ==='1'" @click="submitsale">立即出售</button>
			<button class="submit-btn" v-else @click="BuyNow">立即购买</button>
		</view>
	</view>
</template>

<script>
	import {
		getindexList,
		submitorder
	} from '@/api/new.js';
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				activeTab: 0, // 0: Tx通证 1: 乐豆
				num: "",
				type: "1",
				userInfo: {},
				tokenAmount: null,
				statusBarHeight: statusBarHeight,
			}
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type
			this.getUserInfo()
		},
		methods: {
			getUserInfo: function() {
				this.loading = true
				getindexList().then((res) => {
					console.log(res)
					this.userInfo = res.data
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			switchTab(index) {
				this.activeTab = index
			},
			// 立即出售
			submitsale: function() {
        if(this.loading){
          return;
        }
				this.loading = true
				const obj = {
					balanceAmount: this.balanceAmount,
					tokenAmount: this.tokenAmount,
					type: 1
				}
				submitorder(obj).then((res) => {
					console.log(res)
					this.$util.Tips({
						title: "成功"
					});
					this.num = 0
					this.tokenAmount = null
					this.loading = false
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			// 立即购买
			BuyNow: function() {
        if(this.loading){
          return;
        }
				this.loading = true
				const obj = {
					balanceAmount: this.balanceAmount,
					tokenAmount: this.tokenAmount,
					type: 2
				}
				submitorder(obj).then((res) => {
					console.log(res)
					this.$util.Tips({
						title: "成功"
					});
					this.num = 0
					this.tokenAmount = null
					this.loading = false
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			getnum: function() {
				this.balanceAmount = this.tokenAmount * this.userInfo.tokenRate
				return this.tokenAmount * this.userInfo.tokenRate
			}

		}
	}
</script>

<style lang="scss">
	.container {
		/* min-height: 100vh; */
		height: 210px;
		padding: 0 35rpx 35rpx 35rpx;
		/* background: #D92B2D; */
		/* background-image: url("@/static/blind/1.png"); */
		background-color: #e73224;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.content {
		width: 100%;
		height: 180px;
		padding-top: 10px;
	}

	.body-tab {
		z-index: 999;
		width: 92%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		border: 1px solid lavender;
		position: relative;
		top: -20px;
	}

	/* Tab切换样式 */
	.tabs {
		display: flex;
		padding-top: 20rpx;
		margin-bottom: 40rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: 333;
		padding: 24rpx 0;
		position: relative;
	}

	.tab-item.active {
		color: 333;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 3rpx;
	}


	/* 资产卡片 */
	.asset-card {
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	.asset-cards {
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		display: flex;

		.amount-boxs {
			width: 50%;
		}
	}


	.amount-box {
		text-align: left;
		display: block;
		font-size: 13px;
		color: #fff;

		:nth-child(2) {
			color: #f79b6d;
		}
	}

	.amount {
		display: block;
		font-size: 30rpx;
		color: gainsboro;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.amount1 {
		display: block;
		font-size: 32rpx;
		color: #f79b6d;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.price {
		font-size: 28rpx;
		color: #fbffff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 2px;
		background: #e73224;
		/* 将白色改为红色 */
		border-radius: 3rpx;
	}

	/* 表单样式 */
	.form {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 32rpx;
	}

	.form-item {
		margin-bottom: 48rpx;
	}

	.input-title {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		text {
			font-size: 14px;
			font-weight: 600;
		}
	}

	.icon-replace {
		width: 36rpx;
		height: 36rpx;
		background: #ddd;
		margin-right: 16rpx;
	}

	.input {
		height: 96rpx;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 32rpx;
	}

	.fee-line {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666;
		border-top: 2rpx solid #eee;
	}

	/* 按钮样式 */
	.submit-btn {
		width: 92%;
		text-align: center;
		margin: 60rpx 0;
		margin-left: auto;
		margin-right: auto;
		background: #3a3a3a;
		color: #fff;
		border-radius: 50rpx;
		font-size: 34rpx;
		height: 96rpx;
		line-height: 96rpx;
		border: none;
	}
</style>
